<template>
  <div class="dialog_content">
    <el-dialog class="large_dialog" title="关联设备" :visible.sync="dialogVisible" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="content">

        <div class="camera">
          <el-select v-model="formModel.cameraIndexCode" placeholder="请选择摄像头" clearable>
            <el-option v-for="item in cameraList" :key="item.cameraIndexCode" :label="item.cameraName" :value="item.cameraIndexCode" />
          </el-select>
        </div>

        <div class="flex">

          <div class="block">
            <CustomTitle title="未关联设备"></CustomTitle>

            <el-form ref="searchForm" :inline="true" :model="searchMap">
              <el-form-item size="small">
                <el-select v-model="searchMap.deviceTypeId" placeholder="请选择设备类型" clearable>
                  <el-option v-for="item in deviceList" :key="item.deviceTypeId" :label="item.deviceTypeName" :value="item.deviceTypeId" />
                </el-select>
              </el-form-item>
              <el-form-item class="input" size="small">
                <el-input v-model="searchMap.keyword" placeholder="关键字搜索"></el-input>
              </el-form-item>
              <el-form-item size="small">
                <el-button @click="handleSerachUN()" class="btn_primary">查询</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="unConnectDeviceList" v-loading="unConnectDeviceLoading" stripe class="per_table" @selection-change="handleSelectionChangeUN" :height="winTableH" style="width: 100%;margin-bottom:10px;">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column prop="deviceCode" label="编号"></el-table-column>
              <el-table-column prop="deviceName" label="名称"></el-table-column>
              <el-table-column prop="installPosition" label="位置"></el-table-column>
            </el-table>

            <!-- 分页 -->
            <Pagination v-show="unConnectDeviceListTotal > 0" :total="unConnectDeviceListTotal" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" :page-sizes="[100]" @change="getUnConnectDeviceListList"></Pagination>
            <!-- 分页over -->

          </div>

          <div class="block-change">
            <div class="icon" @click="toConnect(1)"><span>></span></div>
            <div class="icon" @click="toConnect(0)"><span>&lt;</span></div>
          </div>

          <div class="block">
            <CustomTitle title="已关联设备"></CustomTitle>

            <el-form ref="searchForm" :inline="true" :model="serachMapUn">
              <el-form-item size="small">
                <el-select v-model="serachMapUn.deviceTypeId" placeholder="请选择设备类型" clearable>
                  <el-option v-for="item in deviceList" :key="item.deviceTypeId" :label="item.deviceTypeName" :value="item.deviceTypeId" />
                </el-select>
              </el-form-item>
              <el-form-item class="input" size="small">
                <el-input v-model="serachMapUn.keyword" placeholder="关键字搜索"></el-input>
              </el-form-item>
              <el-form-item size="small">
                <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="connectDeviceList" v-loading="connectDeviceLoading" stripe class="per_table" @selection-change="handleSelectionChange" :height="winTableH" style="width: 100%;margin-bottom:10px;">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column prop="deviceCode" label="编号"></el-table-column>
              <el-table-column prop="deviceName" label="名称"></el-table-column>
              <el-table-column prop="installPosition" label="位置"></el-table-column>
            </el-table>

            <!-- 分页 -->
            <Pagination v-show="connectDeviceListTotal > 0" :total="connectDeviceListTotal" :page.sync="serachMapUn.pageNum" :limit.sync="serachMapUn.pageSize" :page-sizes="[100]" @change="getConnectDeviceListList"></Pagination>
            <!-- 分页over -->
          </div>
        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDeviceTypesData, getDeviceTypesData, addDeviceTypesData, updateDeviceTypesData, delDeviceTypesData } from '@/api/system/device/types';
import { listDeviceData, setAssociationDevice } from '@/api/system/device/management';
import { listDeviceCamera, getReasonDevice } from '@/api'
import BaseTable from '@/components/PageContent/BaseTable.vue'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
    formData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 提交表单数据
      formModel: {
        // 被关联的设备的设备ID
        beingDeviceIds: [],
        // 摄像头code码
        cameraIndexCode: '',
        // 用于关联其他设备的设备ID，nvr摄像头设备
        deviceId: ''
      },
      // 未关联搜索条件
      searchMap: {
        pageNum: 1,
        // 默认设置100，如果实际数据超过100保存会出问题
        pageSize: 100,
        deptId: '',
        deviceClassifyId: '',
        // 用于关联其他设备的设备ID
        deviceId: "",
        // 设备类型ID
        deviceTypeId: "",
        // 编号/名称/安装位置
        keyword: "",
        // 摄像头code码
        cameraIndexCode: "",
        // 未关联设备固定传0
        cameraFlag: 0
      },
      // 已关联侧搜索条件
      serachMapUn: {
        pageNum: 1,
        // 默认设置100，如果实际数据超过100保存会出问题
        pageSize: 100,
        // 关联状态，0：已关联 1：未关联"
        associationStatus: 0,
        // 用于关联其他设备的设备ID
        deviceId: "",
        // 设备类型ID
        deviceTypeId: "",
        // 编号/名称/安装位置
        keyword: "",
        // 摄像头code码
        cameraIndexCode: ""
      },
      // 设备类型列表(未关联)
      undeviceList: [],
      // 设备类型列表(已关联)
      deviceList: [],
      // 未关联设备列表
      unConnectDeviceList: [],
      // 选中的未关联设备列表
      beingDeviceIdsUn: [],
      // 已关联设备列表
      connectDeviceList: [],
      // 选中的已关联设备列表
      beingDeviceIds: [],
      // 未关联设备列表-总条数
      unConnectDeviceListTotal: 0,
      // 已关联设备列表-总条数
      connectDeviceListTotal: 0,
      // 未关联设备列表-遮罩层
      unConnectDeviceLoading: false,
      // 已关联设备列表-遮罩层
      connectDeviceLoading: false,
      // 摄像头列表
      cameraList: [],

    };
  },
  computed: {},
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    submitFrom() {
      if (this.beingDeviceIds.length || this.beingDeviceIdsUn.length) {
        this.$message.error(`请把已选数据进行数据穿梭操作后保存!`);
        return
      }
      this.formModel.beingDeviceIds = this.connectDeviceList.map(item => item.deviceId)

      if (!this.formModel.cameraIndexCode) {
        this.$message.error(`请选择摄像头后保存`);
        return
      }

      setAssociationDevice(this.formModel).then(res => {
        if (res && 200 === res.code) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      })
      this.cancel()
    },
    // 获取设备类型列表
    async getListDeviceTypesData(deviceTypeId) {
      if (this.$utils.isNotEmpty(deviceTypeId)) {
        await listDeviceTypesData({ pid: deviceTypeId }).then(res => {
          if (res && 200 === res.code) {
            this.deviceList = this.undeviceList = res.data
          }
        });
      }
    },
    // 获取摄像头列表
    getListDeviceCamera(deviceId, deptId) {
      listDeviceCamera({deviceId, deptId}).then(res => {
        if (res && 200 == res.code) {
          this.cameraList = res.rows
        }
      })
    },
    // 获取未关联设备列表
    getListDeviceData(deviceId) {
      deviceId && (this.searchMap.deviceId = deviceId)
      listDeviceData(this.searchMap).then(res => {
        if (res && 200 == res.code) {
          this.unConnectDeviceList = res.rows.filter(item => this.connectDeviceList.findIndex(item2 => item2.deviceId == item.deviceId) == -1)
          this.unConnectDeviceListTotal = res.total
        }
      })
    },
    // 获取已关联设备列表
    async toGetReasonDevice(deviceId) {
      deviceId && (this.serachMapUn.deviceId = deviceId)
      await getReasonDevice(this.serachMapUn).then(res => {
        if (res && 200 == res.code) {
          this.connectDeviceList = res.rows
          this.connectDeviceListTotal = res.total
        }
      })
    },
    /** 未关联设备 - 查询 */
    handleSerachUN() {
      this.getListDeviceData()
    },
    /** 已关联设备 - 查询 */
    handleSearch() {
      this.toGetReasonDevice()
    },
    /** 未关联设备 - 多选框选中数据 */
    handleSelectionChangeUN(selection) {
      this.beingDeviceIdsUn = selection;
      this.multiple = !selection.length;
    },
    /** 已关联设备 - 多选框选中数据 */
    handleSelectionChange(selection) {
      this.beingDeviceIds = selection;
      this.multiple = !selection.length;
    },
    // 关联设备（穿梭）
    toConnect(type) {
      // 数据从左到右
      if (type == 1) {
        this.connectDeviceList = this.connectDeviceList.concat(this.beingDeviceIdsUn)
        this.unConnectDeviceList = this.unConnectDeviceList.filter(item => !this.beingDeviceIdsUn.includes(item))
      }
      // 数据从右到左
      else {
        this.connectDeviceList = this.connectDeviceList.filter(item => !this.beingDeviceIds.includes(item))
        this.unConnectDeviceList = this.unConnectDeviceList.concat(this.beingDeviceIds)
      }
    },
    getUnConnectDeviceListList() { },
    getConnectDeviceListList() { },
  },
  components: {
    BaseTable
  },
}
</script>

<style lang='less' scoped>
/deep/ .el-dialog {
  margin-bottom: 0;
}

.content .flex {
  display: flex;
  margin-top: 10px;

  .block {
    flex: 1;
  }

  .block-change {
    width: 80px;
    padding-top: 250px;
    text-align: center;

    >div {
      margin: auto;
      width: 32px;
      height: 32px;
      margin-bottom: 16px;
      border: 1px solid rgba(48, 158, 255, 0.7);
      cursor: pointer;

      span {
        display: block;
        font-size: 20px;
        margin: 2px auto;
        width: 26px;
        height: 26px;
        line-height: 24px;
        color: rgba(255, 255, 255, 0.7);
        ;
        border: 1px dashed rgba(255, 255, 255, 0.7);
      }
    }

    >div:hover {
      border: 1px solid rgba(48, 158, 255, 1);

      span {
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

.el-form--inline .el-form-item:last-child {
  margin-right: 0;
}

/deep/ .el-form--inline .el-form-item.input input {
  width: 242px;
}
</style>